<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 14:44:06
 * @LastEditTime: 2024-06-17 18:01:30
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 画板
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\DrawingBoard\index.vue
 * Copyright 版权声明
-->
<template>
  <div id="J_drawingBoard" class="drawingBoard">
    <sketch-rule
      :thick="sketchRuleConfig.thick"
      :scale="sketchRuleConfig.scale"
      :width="canvasBox().width"
      :height="canvasBox().height"
      :startX="sketchRuleConfig.startX"
      :startY="sketchRuleConfig.startY"
      :shadow="sketchRuleConfig.shadow"
      :lines="sketchRuleConfig.lines"
    />
    <div ref="$app" class="edit-screens customScrollBar" @scroll="handleScroll">
      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
        <div
          ref="refSketchRuleBox"
          class="canvas"
          @mousedown="dragCanvas"
        >
          <div :style="{ pointerEvents: 'auto' }">
            <div class="go-chart-edit-content">
              <div class="go-edit-range go-transition" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)">
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs, computed, watch } from 'vue'
import { SketchRule } from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'

const { width, height } = toRefs({
  width: 1920,
  height: 1080
})

// 标尺插件配置
const sketchRuleConfig = ref({
      scale: 1, //658813476562495, //1,
      startX: 0,
      startY: 0,
      lines: {
          // h: [100, 200],
          // v: [100, 200]
          h: [],
          v: []
      },
      thick: 20,
      isShowRuler: true,
      isShowReferLine: true
  })


// 滚动条拖动的高度
const containerWidth = computed(() => {
  return `${height.value * 2}px`
})

// 计算画布大小
const canvasBox = () => {
  const layoutDom = document.getElementById('J_drawingBoard')
  if (layoutDom) {
    // 此处减去滚动条的宽度和高度 
    const scrollW = 20
    return {
      height: layoutDom.clientHeight - scrollW,
      width: layoutDom.clientWidth - scrollW
    }
  }
  return {
    width: 1920,
    height: 1080
  }
}


// 拖拽处理
const dragCanvas = (e) => {
}

// 鼠标挪到设计区域
const mousedownBoxSelect = (e) => {
}

</script>

<style lang="scss" scoped>
.drawingBoard{
  width: 100%;
  height: calc(100vh - 177px);
  overflow: hidden;

  :deep(.h-container){
    .ruler{
      border-bottom: 1px solid #1677ff;
    }
  }

:deep(.v-container){
  .ruler{
    border-right: 1px solid #1677ff;
  }
}
  
  .edit-screens {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .edit-screen-container{
    position: absolute;
    height: v-bind(containerWidth);
    top: 0;
    left: 0;
  }

  .canvas {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #000;
    // transform-origin: 50% 0;
    // transform: translateY(-50%);

    &:hover {
      // cursor: v-bind('cursorStyle');
      cursor: grab;
    }

    &:active {
      cursor: crosshair;
    }
  }

  .go-chart-edit-content{
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.0705882353);
    .go-edit-range{
      background-color: #f2f3f5;
      border: 1px solid #e3e3e4;
      width: 1920px;
      height: 1080px;
      // width: 100%;
      // height: 100%;
    }
  }
}
</style>
